<template>
  <router-view />
  <!-- StagewiseToolbar 仅在开发模式下加载 -->
  <component v-if="isDev && StagewiseToolbar" :is="StagewiseToolbar" :config="stagewise_config" />
</template>

<script setup>
import { onMounted, computed, ref } from 'vue'

// 开发模式检测
const isDev = computed(() => import.meta.env.DEV)

// StagewiseToolbar 组件和插件引用
const StagewiseToolbar = ref(null)
const VuePlugin = ref(null)

// Stagewise 配置
const stagewise_config = computed(() => ({
  plugins: VuePlugin.value ? [VuePlugin.value] : []
}))

// 动态加载 StagewiseToolbar（仅在开发模式下）
onMounted(async () => {
  if (import.meta.env.DEV) {
    try {
      const { StagewiseToolbar: Toolbar } = await import('@stagewise/toolbar-vue')
      const { VuePlugin: Plugin } = await import('@stagewise-plugins/vue')
      StagewiseToolbar.value = Toolbar
      VuePlugin.value = Plugin
    } catch (error) {
      console.warn('Failed to load StagewiseToolbar:', error)
    }
  }

  // 确保DOM已完全加载
  window.addEventListener('DOMContentLoaded', () => {
    document.body.style.backgroundColor = '#f5f7fa'
  })

  // 延迟一小段时间确保应用已完全渲染
  setTimeout(() => {
    const appLoading = document.getElementById('app-loading')
    if (appLoading) {
      // 先设置透明度为0，然后在过渡结束后移除元素
      appLoading.style.opacity = '0'
      appLoading.style.visibility = 'hidden'

      // 监听过渡结束后移除元素
      appLoading.addEventListener('transitionend', () => {
        appLoading.remove()
      })
    }
  }, 100) // 延迟100毫秒，可根据需要调整
})
</script>
